<template>
  <div class="footerMusic">
    <div class="footerLeft" @click="changeAndDuration">
      <img :src="playlist[playlistIndex].al.picUrl" alt="" />
      <div style="margin-left: 0.2rem">
        <Vue3Marquee style="width: 200px">{{
          playlist[playlistIndex].name
        }}</Vue3Marquee>
        <span>横滑可以切换上下首哦</span>
      </div>
    </div>
    <div class="footerRight">
      <!-- 播放 -->
      <svg
        class="icon"
        aria-hidden="true"
        @click="playMusic"
        v-if="$store.state.isBtnShow"
      >
        <use xlink:href="#icon-bofang"></use>
      </svg>
      <!-- 暂停 -->
      <svg class="icon" aria-hidden="true" @click="playMusic" v-else>
        <use xlink:href="#icon-bofang1"></use>
      </svg>
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-24gl-playlistMusic4"></use>
      </svg>
    </div>
    <audio
      ref="audio"
      :src="`https://music.163.com/song/media/outer/url?id=${playlist[playlistIndex].id}.mp3`"
    ></audio>
    <van-popup
      v-model:show="$store.state.detailShow"
      position="bottom"
      :style="{ height: '100%', width: '100%' }"
    >
      <MusicDetail
        :musiclist="playlist[playlistIndex]"
        :play="playMusic"
        :isbtnShow="$store.state.isBtnShow"
        :getMusicDuration="getMusicDuration"
      ></MusicDetail>
    </van-popup>
  </div>
</template>

<script>
import { useStore } from "vuex";
import { ref, computed, watch, reactive } from "vue";
import MusicDetail from "@/components/Item/MusicDetail";

//引入跑马灯  完成歌曲名循环滚动  Vue3Marquee组件 需要网络下载
import { Vue3Marquee } from "vue3-marquee";
import "vue3-marquee/dist/style.css";

export default {
  components: { MusicDetail, Vue3Marquee },
  setup() {
    let timer2 = 0;
    //数据
    let states = reactive({
      store: useStore(), //vuex
    });
    //解构vuex
    let { state, commit, dispatch } = states.store;
    //从vuex获取播放音乐列表
    let playlist = computed(() => {
      return state.playlist;
    });
    //从vuex获取播放音乐索引
    let playlistIndex = computed(() => {
      return state.playlistIndex;
    });
    //获取 audio DOM元素
    let audio = ref(null);

    //方法 获取歌曲现在时间  定时器
    function updateTime() {
      clearInterval(state.timer);
      state.timer = setInterval(() => {
        commit("UPDATETIME", audio.value.currentTime);
      }, 10);
    }

    //点击播放音乐  显示/隐藏
    function playMusic() {
      if (audio.value.paused) {
        audio.value.play();
        //播放一直调用定时器进行时间更新
        updateTime();
        commit("ISBTNSHOW", false);
      } else {
        //清除定时器
        clearInterval(state.timer);
        audio.value.pause();
        commit("ISBTNSHOW", true);
      }
    }

    //方法 获取歌曲总时长
    function getMusicDuration() {
      //延迟获取duration
      setTimeout(() => {
        commit("GETDURATION", audio.value.duration);
      }, 150);
    }

    //方法 显示歌曲详情 与获取总时长
    function changeAndDuration() {
      commit("UPDATEDETAILSHOW", true);
      getMusicDuration();
    }

    //监听playlistIndex playlist  开启定时器
    watch([playlistIndex, playlist], () => {
      audio.value.autoplay = true;
      updateTime();
      commit("ISBTNSHOW", false);
      //获取当前歌曲歌词
      dispatch("getMusicLyric", state.playlist[state.playlistIndex].id);
      getMusicDuration();
    });

    watch(
      () => state.currentTime,
      (newv) => {
        if (!isNaN(state.duration)) {
          if (newv == state.duration) {
            clearTimeout(timer2);
            timer2 = setTimeout(() => {
              if (
                state.playlist.length != 1 &&
                state.playlistIndex + 1 !== state.playlist.length - 1
              ) {
                commit("PREANDNEXTMUSICPLAY", state.playlistIndex + 1);
              } else {
                //当索引等于playlist中存储歌曲最后一首时 切换最后一首歌曲
                commit("PREANDNEXTMUSICPLAY", 0);
              }
            }, 300);
          }
        } else {
          getMusicDuration();
        }
      }
    );

    return {
      playlist,
      playlistIndex,
      audio,
      playMusic,
      changeAndDuration,
      getMusicDuration,
    };
  },
};
</script>

<style lang="less" scoped>
.footerMusic {
  position: fixed;
  display: flex;
  justify-content: space-between;
  bottom: 0;
  width: 100%;
  height: 1.4rem;
  background-color: #fff;
  border-top: 1px solid #999;
  padding: 0.2rem;
  .footerLeft {
    width: 75%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    img {
      width: 1rem;
      height: 1rem;
      border-radius: 50%;
    }
  }
  .footerRight {
    width: 20%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style>